<template>
  <div class="fx-divider" :class="[`fx-divider-${type}`,`fx-divider-horizontal-${orientation}`,{dashed:dashed}]"
       :style="dividerStyle">
    <div class="before" v-if="type==='horizontal'" :style="{borderColor:color}"></div>
    <span class="pl10 pr10" v-if="$slots.default"><slot></slot></span>
    <div class="after" v-if="type==='horizontal'" :style="{borderColor:color}"></div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { codeRule } from '@/base/types'

export interface DividerProps {
  type: 'horizontal' | 'vertical';
  orientation: 'left' | 'center' | 'right';
  dashed: boolean;
  color: string;
  margin: string | number;
}

export default defineComponent({
  name: 'fxDivider',
  props: {
    // 分割线类型
    type: {
      type: String as PropType<'horizontal' | 'vertical'>,
      default: 'horizontal'
    },
    // 分割线文字位置
    orientation: {
      type: String as PropType<'left' | 'center' | 'right'>,
      default: 'center'
    },
    // 是否虚线
    dashed: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    // 颜色
    color: {
      type: String as PropType<string>,
      default: '#ccc'
    },
    // 间距
    margin: {
      type: [String, Number] as PropType<string | number>,
      default: 16
    }
  },
  setup (props: DividerProps) {
    // 分割线颜色样式
    const dividerStyle = computed(() => {
      const margin = codeRule.test(String(props.margin)) ? props.margin : `${props.margin}px`
      if (props.type === 'horizontal') {
        return {
          borderColor: props.color,
          margin: `${margin} 0`
        }
      } else {
        return {
          backgroundColor: props.color,
          margin: `0 ${margin}`
        }
      }
    })

    return {
      dividerStyle
    }
  }
})
</script>
